<div xmlns:f="http://java.sun.com/jsf/core"
	  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
	 <style>
	 		#m1p1_divWrapper{
		   width: 728px;
		   height: 550px;
	 	}
    #m1p1_divListaPersonas{
			position:absolute;
			width: 200px;
			height: 100px;
		}
	 	#m1p1_divInformacionSocio{
			 position:absolute;
	 	   border: 1px solid #A8A8A8;
    	 border-radius: 2px;
		   width: 540px;
		   height: 175px;
			 margin-left: 180px;
			 margin-top: 15px;
			 padding-left: 5px;
		   padding-top: 5px;
	 	}
	 	#m1p1_divTabViewSocios{
			 position:absolute;
			 margin-top: 200px;
			 width: 740px;
		}
        #m1p1_listaSocios{
			 margin-top: 5px;
			 width: 145px;
			 height: 150px;
		}
		#m1p1_divTablaPrestamos, #m1p1_divTablaAportaciones,
        #m1p1_divTablaCobros, #m1p1_divTablaFirmas ,
        #m1p1_divTablaPrestamosDeAval, #m1p1_divTablaPrestamosAval{
			  border: 1px solid #A8A8A8;
    	  border-radius: 2px;
		    height: 245px;
    	  width: 540px;		   
			  margin-top: 0px;
			margin-left: -20px;
		    overflow: scroll;
		}
		#m1p1_divTotalesAportacion,
		#m1p1_divTotalesCobro{
			margin-left: 290px;
			margin-top: 5px;
		}
		#m1p1_divTotalesPrestamo{
			margin-left: 200px;
			margin-top: 5px;
		}
	 	/** Estilos primefaces */
		
		.pf-boton{
				min-width:100px; 
				height:28px; 
				font-size:11px;
		}
		/** estilos componentes primefaces **/
		#m1p1_divWrapper .ui-widget {
	    	font-family: Arial,sans-serif;
	    	font-size: 11px;
		}
		 #m1p1_tabViewSocios\:m1p1_imprimirPrestamosConAval,
        #m1p1_tabViewSocios\:m1p1_imprimirPrestamosDeAval,
        #m1p1_tabViewSocios\:m1p1_imprimirFirmas{
			margin-top: 5px;
			float: right;
		}
	 
	 </style>
	 <script >
	   
	 </script>
	 <div id="m1p1_divWrapper">
		 <h:form id="m1p1_formConsultaSocios" class="formGral" prependId="false">
		   
		   <h:panelGroup id="m1p1_panelPrincipal">
		   <h:outputLabel id="m1p1_lblNombrePantalla" value="#{consultarSocioBean.nombrePantalla}" />
		   <div id="m1p1_divPrincipal" >
		   <div id="m1p1_divListaPersonas">
		      <h:outputLabel id="m1p1_lblBuscarSocio" value="Buscar Socio" styleClass="lblGral"/>
		      <p:inputText id="m1p1_txtBuscarSocio" size="20" />
		      <p:selectOneListbox id="m1p1_listaSocios" value="#{consultarSocioBean.idSocioSeleccionado}">
		         <p:ajax event="change" process="@this" update="m1p1_panelPrincipal" listener="#{consultarSocioBean.mostrarDatosSocio}"/>
		         <f:selectItems value="#{consultarSocioBean.listaSocios}" var="socio" itemValue="#{socio.idSocio}" itemLabel="#{socio.nombreSocio}"/>
		      </p:selectOneListbox>
		   </div>
		   <div id="m1p1_divInformacionSocio">
		   <h:outputLabel id="m1p1_lblDatosGenerales" value="Datos generales" style="margin-bottom: 5px;" styleClass="lblGral" />
		   <table>
		      <tr>
		         <td> <h:outputLabel id="m1p1_lblNoPersonal" value="No. Personal" styleClass="lblGral"/> </td>
		         <td> <p:inputText id="m1p1_txtNoPersonal" size="15" value="#{consultarSocioBean.datosSocio.idSocio}"
		         		readonly="true"/> </td>
		      </tr>
		      <tr>
		         <td> <h:outputLabel id="m1p1_lblNombre" value="Nombre" styleClass="lblGral"/> </td>
		         <td> <p:inputText id="m1p1_txtNombre" size="25" value="#{consultarSocioBean.datosSocio.nombreSocio}" readonly="true"/> </td>
		      </tr>
		      <tr>
		      	 <td> <h:outputLabel id="m1p1_lblZona" value="Zona" styleClass="lblGral"/> </td>
		         <td> <p:inputText id="m1p1_txtZona" size="25" value="#{consultarSocioBean.datosSocio.zona}" readonly="true"/> </td>
		         <td> <h:outputLabel id="m1p1_lblUnidad" value="Unidad" styleClass="lblGral"/> </td>
		         <td> <p:inputText id="m1p1_txtUnidad" size="25" value="#{consultarSocioBean.datosSocio.unidad}" readonly="true"/> </td>
		      </tr>
		      <tr>
		         <td> <h:outputLabel id="m1p1_lblCategoria" value="Categoria" styleClass="lblGral"/> </td>
		         <td> <p:inputText id="m1p1_txtCategoria" size="25" value="#{consultarSocioBean.datosSocio.categoria}" readonly="true"/> </td>
		      </tr>
		      <tr>
		      	 <td> <h:outputLabel id="m1p1_lblTipoSocio" value="Tipo Socio" styleClass="lblGral"/> </td>
		         <td> <p:inputText id="m1p1_txtTipoSocio" size="15" value="#{consultarSocioBean.datosSocio.tipoSocio}" readonly="true"/> </td>
		         <td> <h:outputLabel id="m1p1_lblRecomendados" value="Recomendados" styleClass="lblGral"/> </td>
		         <td> <p:inputText id="m1p1_txtRecomendados" size="15" value="#{consultarSocioBean.datosSocio.recomendados}" readonly="true"/> </td>
		      </tr>		      
		   </table>
		   </div>
		   <div id="m1p1_divTabViewSocios">
		   <p:tabView id="m1p1_tabViewSocios" dynamic="true" cache="false" activeIndex="#{consultarSocioBean.indiceActivo}"
		          style="margin-top:10px; font-size: 11px;" orientation="left">
		       <p:tab id="m1p1_tabAportaciones" title="Aportaciones" rendered="#{consultarSocioBean.mostrarPestania[0]}" >
		          <div id="m1p1_divTablaAportaciones">
		          <p:dataTable id="m1p1_tablaAportaciones" value="#{consultarSocioBean.listaAportaciones}" 
	    		    var="poliza"  >
	    		    
					<p:column id="m1p1_colNoPoliza" sortBy="#{poliza.noPoliza}">
						<f:facet name="header">No. Poliza</f:facet>
						<h:outputText id="m1p1_lblNoPoliza" value="#{poliza.noPoliza}" />
					</p:column>
					<p:column id="m1p1_colMes" sortBy="#{poliza.fecha}">
						<f:facet name="header">Fecha</f:facet>
						<h:outputText id="m1p1_lblFecha" value="#{poliza.fecha}" >
						   <f:convertDateTime pattern="dd/MM/yyyy"/> 
						</h:outputText>
					</p:column>
					<p:column id="m1p1_colDrenaje" sortBy="#{poliza.concepto}">
						<f:facet name="header">Concepto</f:facet>
						<h:outputText id="m1p1_lblConcepto" value="#{poliza.concepto}" />
					</p:column>
					<p:column id="m1p1_colCargo" sortBy="#{poliza.cargo}">
					  	<f:facet name="header">Cargo</f:facet>
						<h:outputText id="m1p1_lblCargo" value="#{poliza.cargo}" style="font-weight:bold;">
						  	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
						</h:outputText>
					</p:column>
					<p:column id="m1p1_colAbono" sortBy="#{poliza.abono}">
					  	<f:facet name="header">Abono</f:facet>
						<h:outputText id="m1p1_lblAbono" value="#{poliza.abono}" style="font-weight:bold;">
						  	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
						</h:outputText>
					</p:column>
					
				</p:dataTable>
				</div>
				<div id="m1p1_divTotalesAportacion">
				    <h:outputLabel id="m1p1_lblTotalesAportacion" value="Total" styleClass="lblGral"></h:outputLabel>
				    <p:inputText id="m1p1_txtTotalCargo" size="10" style="margin-left: 5px; margin-right: 5px;" readonly="true"
				       value="#{consultarSocioBean.totalesAportacion[0]}">
				     	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
				     </p:inputText>
				    <p:inputText id="m1p1_txtTotalAbono" size="10"  readonly="true"
				       value="#{consultarSocioBean.totalesAportacion[1]}">
				    	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
				    </p:inputText>
				</div>
		      </p:tab>
		      <p:tab id="m1p1_tabInfoPrestamos" title="Prestamos" rendered="#{consultarSocioBean.mostrarPestania[1]}">
		          <div id="m1p1_divTablaPrestamos">
		          <p:dataTable id="m1p1_tablaPrestamos" var="prestamo" value="#{consultarSocioBean.listaPrestamos}"  
		        		 style="font-size:11px; font-weight: none !important;">
        			<p:column headerText="Prestamo" sortBy="#{prestamo.idPoliza}">
            			<h:outputText value="#{prestamo.idPoliza}" />
			        </p:column>
        			<p:column headerText="Socio" sortBy="#{prestamo.idSocio}">
            			<h:outputText value="#{prestamo.idSocio}" />
        			</p:column>
        			<p:column headerText="Aval" sortBy="#{prestamo.idAval}">
            			<h:outputText value="#{prestamo.idAval}" />
        			</p:column>
        			<p:column headerText="Cheque" sortBy="#{prestamo.cheque}">
            			<h:outputText value="#{prestamo.cheque}" />
        			</p:column>
        			<p:column headerText="F. Inicio" sortBy="#{prestamo.fechaInicial}" >
            			<h:outputText value="#{prestamo.fechaInicial}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
           			</p:column>
      				<p:column headerText="F. Vencimiento" sortBy= "#{prestamo.fechaVencimiento}" >
            			<h:outputText value="#{prestamo.fechaVencimiento}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Quincena" sortBy="#{prestamo.quincena}">
            			<h:outputText value="#{prestamo.quincena}" >            				
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Tasa" sortBy="#{prestamo.tasa}">
            			<h:outputText value="#{prestamo.tasa}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Importe" sortBy="#{prestamo.importe}">
            			<h:outputText value="#{prestamo.importe}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Imp. Interes" sortBy="#{prestamo.interes}">
            			<h:outputText value="#{prestamo.interes}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Amortizacion" sortBy="#{prestamo.amortizacion}">
            			<h:outputText value="#{prestamo.amortizacion}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
   			     </p:dataTable>
				</div>
				<div id="m1p1_divTotalesPrestamo">
				    <h:outputLabel id="m1p1_lblTotalesPrestamo" value="Total" styleClass="lblGral"></h:outputLabel>
				    <p:inputText id="m1p1_txtTotalImporte" size="10" style="margin-left: 5px;" readonly="true"
				    	value="#{consultarSocioBean.totalesPrestamo[0]}">
				    	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
				    </p:inputText>
				    <p:inputText id="m1p1_txtTotalInteres" size="10" style="margin-left: 5px; margin-right: 5px;" readonly="true"
				    	value="#{consultarSocioBean.totalesPrestamo[1]}">
				    	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
				    </p:inputText>
				    <p:inputText id="m1p1_txtTotalAmortizacion" size="10"  readonly="true"
				    	value="#{consultarSocioBean.totalesPrestamo[2]}">
				    	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
				    </p:inputText>
				</div>
		      </p:tab>
		      <p:tab id="m1p1_tabInfoCobros" title="Cobros" rendered="#{consultarSocioBean.mostrarPestania[2]}">
		      		 <div id="m1p1_divTablaCobros">
		          <p:dataTable id="m1p1_tablaCobros" value="#{consultarSocioBean.listaCobros}" 
	    		    var="poliza" >
	    		    
					<p:column id="m1p1_colNoPoliza" sortBy="#{poliza.noPoliza}">
						<f:facet name="header">No. Poliza</f:facet>
						<h:outputText id="m1p1_lblNoPoliza" value="#{poliza.noPoliza}" />
					</p:column>
					<p:column id="m1p1_colMes" sortBy="#{poliza.fecha}">
						<f:facet name="header">Fecha</f:facet>
						<h:outputText id="m1p1_lblFecha" value="#{poliza.fecha}" >
						   <f:convertDateTime pattern="dd/MM/yyyy"/> 
						</h:outputText>
					</p:column>
					<p:column id="m1p1_colDrenaje" sortBy="#{poliza.concepto}">
						<f:facet name="header">Concepto</f:facet>
						<h:outputText id="m1p1_lblConcepto" value="#{poliza.concepto}" />
					</p:column>
					<p:column id="m1p1_colCargo" sortBy="#{poliza.cargo}">
					  	<f:facet name="header">Cargo</f:facet>
						<h:outputText id="m1p1_lblCargo" value="#{poliza.cargo}" style="font-weight:bold;">
						  	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
						</h:outputText>
					</p:column>
					<p:column id="m1p1_colAbono" sortBy="poliza.abono">
					  	<f:facet name="header">Abono</f:facet>
						<h:outputText id="m1p1_lblAbono" value="#{poliza.abono}" style="font-weight:bold;">
						  	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
						</h:outputText>
					</p:column>
					
				</p:dataTable>
				</div>
				<div id="m1p1_divTotalesCobro">
				    <h:outputLabel id="m1p1_lblTotalesCobro" value="Total" styleClass="lblGral"></h:outputLabel>
				    <p:inputText id="m1p1_txtTotalCargoCobro" size="10" style="margin-left: 5px; margin-right: 5px;" 
				       value="#{consultarSocioBean.totalesCobro[0]}" readonly="true">
				       <f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
				       </p:inputText>
				    <p:inputText id="m1p1_txtTotalAbonoCobro" size="10" 
				    	value="#{consultarSocioBean.totalesCobro[0]}" readonly="true">
				    	<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
				    </p:inputText>
				</div>
		      </p:tab>		
		       <p:tab id="m1p1_tabInfoPrestamosConAval" title="Prestamos con Aval" rendered="#{consultarSocioBean.mostrarPestania[3]}">
		          <div id="m1p1_divTablaPrestamosAval">
		          <p:dataTable id="m1p1_tablaPrestamosAval" var="prestamo" value="#{consultarSocioBean.listaPrestamosConAval}"  
		        		 style="font-size:11px; font-weight: none !important;">
        			<p:column headerText="Prestamo" sortBy="#{prestamo.idPoliza}">
            			<h:outputText value="#{prestamo.idPoliza}" />
			        </p:column>
        			<p:column headerText="Aval" sortBy="#{prestamo.idAval}">
            			<h:outputText value="#{prestamo.idAval}" />
        			</p:column>
        			<p:column headerText="Nombre" sortBy="#{prestamo.nombreAval}">
            			<h:outputText value="#{prestamo.nombreAval}" />
        			</p:column>
        			<p:column headerText="F. Inicio" sortBy="#{prestamo.fechaInicial}">
            			<h:outputText value="#{prestamo.fechaInicial}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
           			</p:column>
      				<p:column headerText="F. Vencimiento" sortBy="#{prestamo.fechaVencimiento}">
            			<h:outputText value="#{prestamo.fechaVencimiento}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Importe" sortBy="#{prestamo.importe}">
            			<h:outputText value="#{prestamo.importe}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Imp. Interes" sortBy="#{prestamo.interes}">
            			<h:outputText value="#{prestamo.interes}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
        			
   			     </p:dataTable>
   			     
				</div>
				<p:commandButton id="m1p1_imprimirPrestamosConAval" value="Imprimir" />
				</p:tab>      
				<p:tab id="m1p1_tabInfoPrestamosDeAvales" title="Prestamos de Aval" rendered="#{consultarSocioBean.mostrarPestania[4]}">
		          <div id="m1p1_divTablaPrestamosDeAval">
		          <p:dataTable id="m1p1_tablaPrestamosDeAval" var="prestamo" value="#{consultarSocioBean.listaPrestamosDeAval}"  
		        		 style="font-size:11px; font-weight: none !important;">
        			<p:column headerText="Prestamo" sortBy="#{prestamo.idPoliza}">
            			<h:outputText value="#{prestamo.idPoliza}" />
			        </p:column>
        			<p:column headerText="Persona" sortBy="#{prestamo.personaPrestamo}">
            			<h:outputText value="#{prestamo.personaPrestamo}" />
        			</p:column>
        			<p:column headerText="Aval" sortBy="#{prestamo.nombreAval}">
            			<h:outputText value="#{prestamo.nombreAval}" />
        			</p:column>
        			<p:column headerText="F. Inicio" sortBy="#{prestamo.fechaInicial}">
            			<h:outputText value="#{prestamo.fechaInicial}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
           			</p:column>
      				<p:column headerText="F. Vencimiento" sortBy="#{prestamo.fechaVencimiento}">
            			<h:outputText value="#{prestamo.fechaVencimiento}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Importe" sortBy="#{prestamo.importe}">
            			<h:outputText value="#{prestamo.importe}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Imp. Interes" sortBy="#{prestamo.interes}">
            			<h:outputText value="#{prestamo.interes}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>        			
   			     </p:dataTable>
				</div>
				<p:commandButton id="m1p1_imprimirPrestamosDeAval" value="Imprimir" />
				</p:tab>    
				<p:tab id="m1p1_tabInfoFirmas" title="Firmas" rendered="#{consultarSocioBean.mostrarPestania[5]}">
		          <div id="m1p1_divTablaFirmas">
		          <p:dataTable id="m1p1_tablaFirmas" var="firma" value="#{consultarSocioBean.listaFirmas}"  
		        		 style="font-size:11px; font-weight: none !important;">
        			<p:column headerText="Prestamo" sortBy="#{firma.idPoliza}">
            			<h:outputText value="#{firma.idPoliza}" />
			        </p:column>
        			<p:column headerText="Persona" sortBy="#{firma.personaPrestamo}">
            			<h:outputText value="#{firma.personaPrestamo}" />
        			</p:column>
        			<p:column headerText="Aval" sortBy="#{firma.nombreAval}">
            			<h:outputText value="#{firma.nombreAval}" />
        			</p:column>
        			<p:column headerText="F. Inicio" sortBy="#{firma.fechaInicial}">
            			<h:outputText value="#{firma.fechaInicial}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
           			</p:column>
      				<p:column headerText="F. Vencimiento" sortBy="#{firma.fechaVencimiento}">
            			<h:outputText value="#{firma.fechaVencimiento}" >
            				<f:convertDateTime pattern="dd/MM/yyyy"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Importe" sortBy="#{firma.importe}">
            			<h:outputText value="#{firma.importe}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>
        			<p:column headerText="Imp. Interes" sortBy="#{firma.interes}">
            			<h:outputText value="#{firma.interes}" >
            				<f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
            			</h:outputText>
        			</p:column>        			
   			     </p:dataTable>
				</div>
				<p:commandButton id="m1p1_imprimirFirmas" value="Imprimir" />
				</p:tab>               
		   </p:tabView>
		   </div>
		   </div>
		   </h:panelGroup>
		 </h:form>
	 </div>
</div>